<template>
  <div class="voluntary_box">
    <div class="box_top">
      <div class="top_left">
        <div class="item_box">
          <div class="item_text">名称</div>
          <div class="item_input">
            <input
              type="text"
              v-model="scoreTypeName"
              placeholder="请输入学校名称"
            />
          </div>
          <div class="handle_search">
            <el-button size="mini" @click="handleFind">查询</el-button>
          </div>
          <div class="handle_search">
            <el-button size="mini" @click="handleResult">重置</el-button>
          </div>
        </div>
        <div class="item_box" style="margin-top: 16px">
          <div class="item_fun"></div>
        </div>
      </div>
      <div class="top_mid">
        <div class="item_box"></div>
        <div class="item_box" style="margin-top: 16px"></div>
      </div>
      <div class="top_right"></div>
    </div>
    <div class="is_head">
      <div
        class="box_mid"
        :class="scoreTypeI === item.level ? 'active' : ''"
        v-for="(item, i) in scoreType"
        :key="i"
        @click="selectScoreType(item)"
      >
        {{ item.name }}({{ item.length }}/{{ item.sum }})
      </div>
    </div>
    <div class="table_box" v-loading="voluntaryLoading">
      <div class="school_table" modename="voluntary">
        <div class="field_title el-row">
          <div class="el-col el-col-4" style="text-align: left">
            <div>招生院校</div>
          </div>
          <div class="el-col el-col-3" style="text-align: center">
            <div>录取概率</div>
          </div>
          <div class="el-col el-col-4" style="text-align: center">
            <div>2024招生计划</div>
          </div>
          <div class="el-col el-col-10" style="text-align: left">
            <div>
              <div class="el-row" style="text-align: center">
                <div class="el-col el-col-6">历年</div>
                <div class="el-col el-col-6">2023</div>
                <div class="el-col el-col-6">2022</div>
                <div class="el-col el-col-6">2021</div>
              </div>
            </div>
          </div>
          <div class="el-col el-col-3" style="text-align: center">
            <div>操作</div>
          </div>
        </div>
        <div
          class="table_frame el-row"
          style="margin-bottom: 10px"
          v-for="(item, i) in schoolInfoList"
          :key="i"
        >
          <div data-v-38c2764f="" class="el-col el-col-4">
            <div
              data-v-38c2764f=""
              class="cell_box"
              style="height: 100%; text-align: left"
            >
              <template v-if="item.id">
                <div class="school_info">
                  <div class="school_name">
                    {{ item.id ? item.school.name : "-" }}
                  </div>
                  <div class="school_type">
                    {{ item.id ? item.school.type_name : "-" }}
                  </div>
                  <div class="school_select_major">2023年选科：不限</div>
                  <div class="school_tags" v-if="item.id">
                    <div
                      class="tags"
                      v-for="(t, g) in item.school.tags.split(',')"
                      :key="g"
                    >
                      {{ t }}
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div style="line-height: 210px">-</div>
              </template>
            </div>
          </div>
          <div data-v-38c2764f="" class="el-col el-col-3">
            <div
              data-v-38c2764f=""
              class="cell_box"
              style="height: 100%; text-align: center"
            >
              <template v-if="item.id">
                <div class="schoole_Admission">
                  <div class="admission_score">
                    {{ item.probability.percent }}
                  </div>
                  <div class="admission_icon">
                    <img
                      src=""
                      alt=""
                    />
                  </div>
                </div>
              </template>
              <template v-else>
                <div style="line-height: 210px">-</div>
              </template>
            </div>
          </div>
          <div data-v-38c2764f="" class="el-col el-col-4">
            <div
              data-v-38c2764f=""
              class="cell_box"
              style="height: 100%; text-align: center"
            >
              <template v-if="item.id">
                <div class="school_plan">
                  {{ item.school.belong }} {{ item.school.city }}
                </div>
              </template>
              <template v-else>
                <div style="line-height: 210px">-</div>
              </template>
            </div>
          </div>
          <div data-v-38c2764f="" class="el-col el-col-10">
            <div
              data-v-38c2764f=""
              class="cell_box"
              style="height: 100%; text-align: left"
            >
              <div data-v-38c2764f="">
                <div data-v-38c2764f="" class="desc_box el-row">
                  <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                    <div data-v-38c2764f="">最低分数</div>
                    <div data-v-38c2764f="">最低位次</div>
                    <div data-v-38c2764f="">招生人数</div>
                    <div data-v-38c2764f="">比我位次</div>
                  </div>
                  <template v-if="item.id">
                    <template v-if="item.score.length == 3">
                      <div
                        data-v-38c2764f=""
                        class="desc_item el-col el-col-6"
                        v-for="(score, s) in item.score"
                        :key="s"
                      >
                        <div data-v-38c2764f="">{{ score.min_score }}</div>
                        <div data-v-38c2764f="">{{ score.min_rank }}</div>
                        <div data-v-38c2764f="">{{ item.jhzsnum }}</div>
                        <div data-v-38c2764f="">
                          <span>{{ score.bwwc > 0 ? "高" : "低" }}</span
                          >{{ score.bwwc }}
                          <span
                            :class="
                              score.bwwc > 0
                                ? 'el-icon-caret-top'
                                : 'el-icon-caret-bottom'
                            "
                            :style="{
                              color:
                                score.bwwc > 0 ? 'green' : 'rgb(248, 71, 88)',
                            }"
                          ></span>
                        </div>
                      </div>
                    </template>
                    <template v-if="item.score.length == 2">
                      <div
                        data-v-38c2764f=""
                        class="desc_item el-col el-col-6"
                        v-for="(score, s) in item.score"
                        :key="s"
                      >
                        <div data-v-38c2764f="">{{ score.min_score }}</div>
                        <div data-v-38c2764f="">{{ score.min_rank }}</div>
                        <div data-v-38c2764f="">{{ item.jhzsnum }}</div>
                        <div data-v-38c2764f="">
                          <span>{{ score.bwwc > 0 ? "高" : "低" }}</span
                          >{{ score.bwwc }}
                          <span
                            :class="
                              score.bwwc > 0
                                ? 'el-icon-caret-top'
                                : 'el-icon-caret-bottom'
                            "
                            :style="{
                              color:
                                score.bwwc > 0 ? 'green' : 'rgb(248, 71, 88)',
                            }"
                          ></span>
                        </div>
                      </div>
                      <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                      </div>
                    </template>
                    <template v-if="item.score.length == 1">
                      <div
                        data-v-38c2764f=""
                        class="desc_item el-col el-col-6"
                        v-for="(score, s) in item.score"
                        :key="s"
                      >
                        <div data-v-38c2764f="">{{ score.min_score }}</div>
                        <div data-v-38c2764f="">{{ score.min_rank }}</div>
                        <div data-v-38c2764f="">{{ item.jhzsnum }}</div>
                        <div data-v-38c2764f="">
                          <span>{{ score.bwwc > 0 ? "高" : "低" }}</span
                          >{{ score.bwwc }}
                          <span
                            :class="
                              score.bwwc > 0
                                ? 'el-icon-caret-top'
                                : 'el-icon-caret-bottom'
                            "
                            :style="{
                              color:
                                score.bwwc > 0 ? 'green' : 'rgb(248, 71, 88)',
                            }"
                          ></span>
                        </div>
                      </div>
                      <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                      </div>
                      <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                      </div>
                    </template>
                  </template>
                  <template v-else>
                    <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                      <div data-v-38c2764f="">-</div>
                      <div data-v-38c2764f="">-</div>
                      <div data-v-38c2764f="">-</div>
                      <div data-v-38c2764f="">-</div>
                    </div>
                    <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                      <div data-v-38c2764f="">-</div>
                      <div data-v-38c2764f="">-</div>
                      <div data-v-38c2764f="">-</div>
                      <div data-v-38c2764f="">-</div>
                    </div>
                    <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                      <div data-v-38c2764f="">-</div>
                      <div data-v-38c2764f="">-</div>
                      <div data-v-38c2764f="">-</div>
                      <div data-v-38c2764f="">-</div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div data-v-38c2764f="" class="el-col el-col-3 handle">
            <template v-if="!item.id">
              <div
                class="no_school_handle"
                style="height: 100%; text-align: center"
              >
                <div data-v-38c2764f="">
                  <div data-v-38c2764f="">
                    <p data-v-38c2764f="" class="handle_num">
                      {{ sortList[i].sort }}
                    </p>
                    <p
                      data-v-38c2764f=""
                      class="operation_btn"
                      @click="addVolunteer"
                    >
                      添加
                    </p>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="school_handle">
                <div class="handle_icon">
                  <div class="edit">
                    <i class="el-icon-edit" @click="editMajor(item)"></i>
                  </div>
                  <div class="delete">
                    <i
                      class="el-icon-delete"
                      @click="deleteMyVoluntaryHandle(item)"
                    ></i>
                  </div>
                </div>
                <div class="handle_fcdj">服从调剂</div>
                <div class="handle_sort">
                  <el-select
                    v-model="sortList[i].sort"
                    placeholder="请选择"
                    size="mini"
                    style="width: 80px"
                    @change="handleSort($event, item, i)"
                  >
                    <el-option
                      v-for="item in schoolInfoList.length"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="handle_select_major" @click="getMyMajorList(item)">
                  已填专业 <i class="el-icon-arrow-down"></i>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="已填专业" :visible.sync="completedMajorShow" width="80%">
      <div class="completed_major_list">
        <div class="school_table" modename="voluntary">
          <div class="field_title el-row">
            <div class="el-col el-col-4" style="text-align: left">
              <div>已选专业</div>
            </div>
            <div class="el-col el-col-3" style="text-align: center">
              <div>录取概率</div>
            </div>
            <div class="el-col el-col-4" style="text-align: center">
              <div>2024招生计划</div>
            </div>
            <div class="el-col el-col-10" style="text-align: left">
              <div>
                <div class="el-row" style="text-align: center">
                  <div class="el-col el-col-6">历年</div>
                  <div class="el-col el-col-6">2023</div>
                  <div class="el-col el-col-6">2022</div>
                  <div class="el-col el-col-6">2021</div>
                </div>
              </div>
            </div>
            <div class="el-col el-col-3" style="text-align: center">
              <div>操作</div>
            </div>
          </div>
          <div
            class="table_frame el-row"
            style="margin-bottom: 10px"
            v-for="(item, i) in completedMajor"
            :key="i"
          >
            <div data-v-38c2764f="" class="el-col el-col-4">
              <div
                data-v-38c2764f=""
                class="cell_box"
                style="height: 100%; text-align: left"
              >
                <template v-if="item.id">
                  <div class="school_info">
                    <div class="school_name">
                      {{ item.id ? item.special_name : "-" }}
                    </div>
                    <div class="school_type">
                      {{ item.id ? item.level3_name : "-" }}
                    </div>
                    <div class="school_select_major">2023年选科：不限</div>
                    <div class="school_tags" v-if="item.id">
                      <div
                        class="tags"
                        v-for="(t, g) in completedMajorSchool.school.tags.split(
                          ','
                        )"
                        :key="g"
                      >
                        {{ t }}
                      </div>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div style="line-height: 210px">-</div>
                </template>
              </div>
            </div>
            <div data-v-38c2764f="" class="el-col el-col-3">
              <div
                data-v-38c2764f=""
                class="cell_box"
                style="height: 100%; text-align: center"
              >
                <template v-if="item.id">
                  <div class="schoole_Admission">
                    <div class="admission_score">
                      {{ completedMajorSchool.probability.percent }}
                    </div>
                    <div class="admission_icon">
                      <img
                        src=""
                        alt=""
                      />
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div style="line-height: 210px">-</div>
                </template>
              </div>
            </div>
            <div data-v-38c2764f="" class="el-col el-col-4">
              <div
                data-v-38c2764f=""
                class="cell_box"
                style="height: 100%; text-align: center"
              >
                <template v-if="item.id">
                  <div class="school_plan">
                    {{ completedMajorSchool.school.belong }}
                    {{ completedMajorSchool.school.city }}
                  </div>
                </template>
                <template v-else>
                  <div style="line-height: 210px">-</div>
                </template>
              </div>
            </div>
            <div data-v-38c2764f="" class="el-col el-col-10">
              <div
                data-v-38c2764f=""
                class="cell_box"
                style="height: 100%; text-align: left"
              >
                <div data-v-38c2764f="">
                  <div data-v-38c2764f="" class="desc_box el-row">
                    <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                      <div data-v-38c2764f="">最低分数</div>
                      <div data-v-38c2764f="">最低位次</div>
                      <div data-v-38c2764f="">招生人数</div>
                      <div data-v-38c2764f="">比我位次</div>
                    </div>
                    <template v-if="item.id">
                      <template v-if="completedMajorSchool.score.length == 3">
                        <div
                          data-v-38c2764f=""
                          class="desc_item el-col el-col-6"
                          v-for="(score, s) in completedMajorSchool.score"
                          :key="s"
                        >
                          <div data-v-38c2764f="">{{ score.min_score }}</div>
                          <div data-v-38c2764f="">{{ score.min_rank }}</div>
                          <div data-v-38c2764f="">
                            {{ completedMajorSchool.jhzsnum }}
                          </div>
                          <div data-v-38c2764f="">
                            <span>{{ score.bwwc > 0 ? "高" : "低" }}</span
                            >{{ score.bwwc }}
                            <span
                              :class="
                                score.bwwc > 0
                                  ? 'el-icon-caret-top'
                                  : 'el-icon-caret-bottom'
                              "
                              :style="{
                                color:
                                  score.bwwc > 0 ? 'green' : 'rgb(248, 71, 88)',
                              }"
                            ></span>
                          </div>
                        </div>
                      </template>
                      <template v-if="completedMajorSchool.score.length == 2">
                        <div
                          data-v-38c2764f=""
                          class="desc_item el-col el-col-6"
                          v-for="(score, s) in completedMajorSchool.score"
                          :key="s"
                        >
                          <div data-v-38c2764f="">{{ score.min_score }}</div>
                          <div data-v-38c2764f="">{{ score.min_rank }}</div>
                          <div data-v-38c2764f="">
                            {{ completedMajorSchool.jhzsnum }}
                          </div>
                          <div data-v-38c2764f="">
                            <span>{{ score.bwwc > 0 ? "高" : "低" }}</span
                            >{{ score.bwwc }}
                            <span
                              :class="
                                score.bwwc > 0
                                  ? 'el-icon-caret-top'
                                  : 'el-icon-caret-bottom'
                              "
                              :style="{
                                color:
                                  score.bwwc > 0 ? 'green' : 'rgb(248, 71, 88)',
                              }"
                            ></span>
                          </div>
                        </div>
                        <div
                          data-v-38c2764f=""
                          class="desc_item el-col el-col-6"
                        >
                          <div data-v-38c2764f="">-</div>
                          <div data-v-38c2764f="">-</div>
                          <div data-v-38c2764f="">-</div>
                          <div data-v-38c2764f="">-</div>
                        </div>
                      </template>
                      <template v-if="completedMajorSchool.score.length == 1">
                        <div
                          data-v-38c2764f=""
                          class="desc_item el-col el-col-6"
                          v-for="(score, s) in completedMajorSchool.score"
                          :key="s"
                        >
                          <div data-v-38c2764f="">{{ score.min_score }}</div>
                          <div data-v-38c2764f="">{{ score.min_rank }}</div>
                          <div data-v-38c2764f="">
                            {{ completedMajorSchool.jhzsnum }}
                          </div>
                          <div data-v-38c2764f="">
                            <span>{{ score.bwwc > 0 ? "高" : "低" }}</span
                            >{{ score.bwwc }}
                            <span
                              :class="
                                score.bwwc > 0
                                  ? 'el-icon-caret-top'
                                  : 'el-icon-caret-bottom'
                              "
                              :style="{
                                color:
                                  score.bwwc > 0 ? 'green' : 'rgb(248, 71, 88)',
                              }"
                            ></span>
                          </div>
                        </div>
                        <div
                          data-v-38c2764f=""
                          class="desc_item el-col el-col-6"
                        >
                          <div data-v-38c2764f="">-</div>
                          <div data-v-38c2764f="">-</div>
                          <div data-v-38c2764f="">-</div>
                          <div data-v-38c2764f="">-</div>
                        </div>
                        <div
                          data-v-38c2764f=""
                          class="desc_item el-col el-col-6"
                        >
                          <div data-v-38c2764f="">-</div>
                          <div data-v-38c2764f="">-</div>
                          <div data-v-38c2764f="">-</div>
                          <div data-v-38c2764f="">-</div>
                        </div>
                      </template>
                    </template>
                    <template v-else>
                      <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                      </div>
                      <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                      </div>
                      <div data-v-38c2764f="" class="desc_item el-col el-col-6">
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                        <div data-v-38c2764f="">-</div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
            <div data-v-38c2764f="" class="el-col el-col-3 handle">
              <template v-if="!item.id">
                <div
                  class="no_school_handle"
                  style="height: 100%; text-align: center"
                >
                  <div data-v-38c2764f="">
                    <div data-v-38c2764f="">
                      <p
                        data-v-38c2764f=""
                        class="operation_btn"
                        @click="addCompletedMajor"
                      >
                        添加
                      </p>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <addMojor ref="addMojor" @getMyVoluntary="getMyVoluntary"></addMojor>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { EventBus } from "@/utils/eventBus";
import { myVoluntary, deleteMyVoluntary, getCountVoluntary } from "@/api/index";
export default {
  name: "",
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  data() {
    return {
      completedMajorShow: false,
      scoreTypeLength: 0,
      scoreTypeName: "",
      scoreTypeI: "2001",
      scoreType: [
        { name: "本科第一批", type: 1, sum: 4, level: "2001", length: 0 },
        // { name: "本科第二批", type: 2, sum: 8 },
        { name: "高职专科批", type: 3, sum: 4, level: "2002", length: 0 },
      ],
      version: "3.8.9",
      schoolInfoList: [],
      sortList: [],
      completedMajor: [],
      completedMajorSchool: {},
      voluntaryLoading: false,
    };
  },
  watch: {
    $route(to, from) {
      this.getMyVoluntary();
      this.getCountVoluntaryData();
    },
  },
  created() {
    EventBus.$on("resultData", (data) => {
      this.getMyVoluntary();
      this.getCountVoluntaryData();
    });
  },
  mounted() {
    this.getMyVoluntary();
    this.getCountVoluntaryData();
  },
  methods: {
    /*
     * author：Gengbaodada
     * create by date：2025/05/16
     * content：查询
     */
    handleFind() {
      this.schoolInfoList = this.schoolInfoList.filter((university) =>
        university.name.includes(this.scoreTypeName)
      );
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/16
     * content：重置查询
     */
    handleResult() {
      this.getMyVoluntary();
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/15
     * content：获取我的已填专业
     */
    getMyMajorList(item) {
      console.log("item", item);
      this.completedMajorSchool = item;
      this.completedMajor = [];
      for (let i = 0; i < 6; i++) {
        this.completedMajor.push({});
      }
      for (let i = 0; i < item.major.length; i++) {
        this.completedMajor[i] = item.major[i];
      }
      console.log("this.completedMajor[i]", this.completedMajor);
      this.completedMajorShow = true;
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/15
     * content：修改顺序
     */
    handleSort(event, item, i) {
      this.sortList = [];
      this.schoolInfoList.splice(i, 1);
      this.schoolInfoList.splice(event - 1, 0, item);
      console.log("aaa", this.scoreType, this.scoreTypeI);
      let obj = this.scoreType.find((e) => e.level === this.scoreTypeI);
      console.log(obj);
      for (let i = 0; i < obj.sum; i++) {
        this.sortList.push({ sort: i + 1 });
      }
      console.log("this.sortList", this.sortList);
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/15
     * content：添加志愿
     */
    addVolunteer() {
      this.$router.push("/index");
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/14
     * content：选择类型
     */
    selectScoreType(item) {
      this.scoreTypeI = item.level;
      this.getMyVoluntary();
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/08
     * content：查看已填专业
     */
    selectMajor(item) {
      console.log("item", item);
      this.$refs.addMojor.handleOpen(item, "find");
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/08
     * content：删除我的志愿
     */
    deleteMyVoluntaryHandle(item) {
      deleteMyVoluntary({ school_id: item.school_id }).then((res) => {
        this.$message.success("删除成功！");
        this.getMyVoluntary();
        this.getCountVoluntaryData();
      });
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/08
     * content：修改已填专业
     */
    editMajor(item) {
      console.log("item", item);
      this.$refs.addMojor.handleOpen(item);
    },
    addCompletedMajor() {
      this.completedMajorShow = false;
      this.$refs.addMojor.handleOpen(this.completedMajorSchool);
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/08
     * content：获取我的已填专业
     */
    getMyVoluntary() {
      this.voluntaryLoading = true;
      this.schoolInfoList = [];
      myVoluntary({ level: this.scoreTypeI }).then((res) => {
        this.schoolInfoList = [];
        this.sortList = [];
        let obj = this.scoreType.find((e) => e.level === this.scoreTypeI);
        for (let i = 0; i < obj.sum; i++) {
          this.schoolInfoList.push({});
          this.sortList.push({ sort: i + 1 });
        }
        if (res.data) {
          for (let i = 0; i < res.data.length; i++) {
            this.schoolInfoList[i] = res.data[i];
          }
        }
        this.voluntaryLoading = false;
      });
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/15
     * content：获取数量
     */
    getCountVoluntaryData() {
      getCountVoluntary().then((res) => {
        this.scoreType[0].length = res.data.bk1;
        this.scoreType[1].length = res.data.zk2;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.handle_search {
  margin-left: 10px;
}
.completed_major_list {
  height: 600px;
  overflow-y: scroll;
}
.handle_select_major {
  text-align: center;
  color: #ff592f;
  margin-top: 10px;
  cursor: pointer;
}
.no_school_handle {
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-45%);
  .handle_num {
    font-size: 16px;
    font-weight: 500;
  }
  .operation_btn {
    cursor: pointer;
    margin-top: 10px;
    width: 89px;
    height: 28px;
    border-radius: 16px;
    background: rgba(255, 89, 47, 0.2);
    color: #0478f1;
    line-height: 28px;
  }
}

.handle {
  position: relative;
  .school_handle {
    top: 45px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    .handle_fcdj {
      text-align: center;
      color: #9ca1a6;
      font-size: 14px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .handle_icon {
      justify-content: center;
      display: flex;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.7);
      cursor: pointer;
      .delete {
        margin-left: 10px;
      }
    }
  }
}

.school_plan {
  color: #919294;
  font-size: 14px;
  letter-spacing: 0.64px;
  padding-top: 40px;
}
.schoole_Admission {
  .admission_icon {
    margin-top: 10px;
    img {
      width: 30px;
      height: 30px;
    }
  }
  .admission_score {
    color: #222224;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.64px;
    padding-top: 10px;
  }
}
.school_info {
  .school_tags {
    display: flex;
    flex-wrap: wrap;
    .tags {
      padding: 3px 8px;
      background-color: #f6f7f7;
      color: #919294;
      border-radius: 3px;
      margin-right: 5px;
      margin-top: 5px;
    }
  }
  .school_name {
    color: #222224;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.64px;
    padding-top: 10px;
  }
  .school_select_major {
    color: #222224;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.64px;
  }
  .school_type {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px;
  }
}
.voluntary_box {
  width: 100%;
}

.voluntary_box .box_top {
  height: 70px;
  padding: 16px;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.voluntary_box .box_top .top_left {
  flex: 1;
  height: 100%;
}

.voluntary_box .box_top .item_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.voluntary_box .box_top .item_box .item_text {
  color: #9ca1a6;
  margin-right: 12px;
}

.voluntary_box .box_top .item_box .item_input {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #f6f7f7;
}

.voluntary_box .box_top .item_box .item_input input[type="text"] {
  outline: none;
  border: none;
  width: 330px;
  height: 36px;
  padding: 10px;
  background-color: #f6f7f7;
}

.voluntary_box .box_top .item_box .item_input span {
  color: #0478f1;
  margin-right: 20px;
  cursor: pointer;
}

.voluntary_box .box_top .item_box .is_btn1,
.voluntary_box .box_top .item_box .is_btn2 {
  display: flex;
  height: 32px;
  padding: 0 12px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: #0478f1;
  color: #fff;
  cursor: pointer;
}

.voluntary_box .box_top .item_box .is_btn2 {
  width: 82px;
  color: #ff6a44;
  background-color: rgba(255, 106, 68, 0.15);
  font-weight: 700;
  margin-right: 12px;
}

.voluntary_box .box_top .item_box .item_fun {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.voluntary_box .box_top .item_box .item_fun .is_item_fun {
  width: 53px;
  height: 28px;
  border-radius: 4px;
  background: #f6f7f7;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
}

.voluntary_box .box_top .top_mid {
  width: 440px;
  height: 100%;
}

.voluntary_box .box_top .top_right {
  width: 88px;
  height: 88px;
}

.voluntary_box .is_head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 70px;
}

.voluntary_box .is_head .box_mid {
  padding: 0 10px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 20px 12px 0;
  background-color: #e8e8e8;
  color: #000;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}

.voluntary_box .is_head .active {
  background-color: #0478f1;
  color: #fff;
}

.voluntary_box .table_box {
  width: 100%;
  min-height: 600px;
}

.school_table {
  border-radius: 4px;
  padding: 0;
}

.school_table .field_title {
  height: 48px;
  line-height: 48px;
  letter-spacing: 0.56px;
  border-bottom: 1px solid #eff0f0;
  padding: 0 16px;
}

.school_table .field_title div {
  font-weight: 700;
}

.school_table .is_empty_box {
  width: 100%;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ccc;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.school_table .table_frame {
  border-bottom: 1px solid #eff0f0;
  position: relative;
  padding: 0 16px;
  border-radius: 6px;
  background-color: #fff;
}

.school_table .table_frame .is_empty_data {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px 20px;
  align-items: center;
}

.school_table .table_frame .is_empty_data p {
  width: 89px;
  height: 28px;
  border-radius: 16px;
  background: rgba(255, 89, 47, 0.2);
  color: #0478f1;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
}

.school_table .table_frame .cell_box {
  width: 100%;
  height: 100%;
}

.school_table .table_frame .cell_box .is_no_empty {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.school_table .table_frame .cell_box .is_title {
  color: #222224;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.64px;
  padding-top: 10px;
}

.school_table .table_frame .cell_box .is_text {
  color: #606166;
  margin-top: 5px;
  font-size: 12px;
}

.school_table .table_frame .cell_box .is_desc {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
}

.school_table .table_frame .cell_box .is_desc div {
  color: #919294;
  margin-right: 8px;
}

.school_table .table_frame .cell_box .is_img {
  width: 100%;
  margin-top: 10px;
}

.school_table .table_frame .cell_box .is_img img {
  width: 24px;
  height: 24px;
}

.school_table .table_frame .cell_box .desc_box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.school_table .table_frame .cell_box .desc_box .desc_item {
  min-height: 210px;
  display: flex;
  flex-direction: column;
}

.school_table .table_frame .cell_box .desc_box .desc_item .is_bor {
  font-weight: 700;
}

.school_table .table_frame .cell_box .desc_box .desc_item .is_col {
  color: #0478f1;
}

.school_table .table_frame .cell_box .desc_box .desc_item div {
  height: 55px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f1f2f2;
  border-left: 1px solid #f1f2f2;
  color: #606166;
}

.school_table .table_frame .cell_box .operation_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
}

.school_table .table_frame .cell_box .operation_box .is_text {
  color: #0478f1;
  margin-top: 10px;
  cursor: pointer;
}

.school_table .table_frame .cell_box .operation_box .operation_mid_text {
  color: #9ca1a6;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.school_table .table_frame .cell_box .operation_box .operation_mid_select {
  width: 70px;
  height: 28px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  background-color: #0478f1;
  border-radius: 4px;
  cursor: pointer;
}

.school_table .table_frame .cell_box .operation_box .operation_mid_select img {
  width: 12px;
  height: 12px;
}

.school_table .table_frame .cell_box .operation_top_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20px;
}

.school_table .table_frame .cell_box .operation_top_btn img {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.school_table .table_frame .cell_box .operation_btn {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.school_table .table_frame .cell_box .operation_btn p:first-child {
  color: #222224;
  font-weight: 700;
  margin-bottom: 10px;
}

.school_table .table_frame .cell_box .operation_btn p:nth-child(2) {
  width: 89px;
  height: 28px;
  border-radius: 16px;
  background: rgba(255, 89, 47, 0.2);
  color: #0478f1;
  line-height: 28px;
}

.school_table .table_frame .cell_box .operation_active {
  background: #0478f1;
  color: #fff;
}

.school_table .table_frame .cell_box .tags_list {
  width: 100%;
  padding: 0 5px 0 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.school_table .table_frame .cell_box .tags_list div {
  padding: 3px 8px;
  background-color: #f6f7f7;
  color: #919294;
  border-radius: 3px;
  margin-right: 5px;
  margin-top: 5px;
}

.school_table .is_paging {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-bottom: 10px;
}
</style>
